import {formatRichText} from '../../../utils/util'
Page({
  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    html:`<h2><strong>一、概述</strong></h2>

    <p><span style="font-size:14px">这里展示的CKEditor编辑器为4.12.1版本，官方地址为：<a href="https://ckeditor.com/" target="_blank">https://ckeditor.com/</a>&nbsp;</span></p>
    
    <p><span style="font-size:14px">可在其官网上下载需要的版本，还可在线定制代码高亮插件！</span></p>
    
    <p><span style="font-size:14px">关于代码高亮插件的在线定制教程可参考本站教程：<a href="https://www.jb51.net/article/163075.htm" target="_blank">https://www.jb51.net/article/163075.htm</a>&nbsp;文章中还附带有&nbsp;</span><a href="https://highlightjs.org/" target="_blank">highlight.js</a><span style="font-size:14px">&nbsp;以及&nbsp;<span style="color:#2980b9"><a href="http://alexgorbatchev.com/SyntaxHighlighter/" target="_blank">SyntaxHighlighter</a> </span>代码高亮插件的下载地址，这里推荐使用&nbsp;</span><strong><span style="color:#e74c3c">highlight.js&nbsp;</span>（下方编辑器说明部分有该插件本站下载地址）</strong></p>
    
    <h2><strong>二、效果展示</strong></h2>
    
    <p>1. 首先来看看代码高亮的显示效果，这里还是以 CKEditor4.12.1 引入文件代码为例，其js代码如下：</p>
    
    <pre>
    <code class="language-javascript">&lt;script src="./ckeditor/ckeditor.js"&gt;&lt;/script&gt;
    &lt;textarea name="editor1" id="editor1" cols="30" rows="10"&gt;&lt;/textarea&gt;
    &lt;script&gt;
        // 这样就可以使用啦
        CKEDITOR.replace('editor1',{
            customConfig : './myconfig.js',  //加载配置js
            removeButtons:'',
            extraPlugins: 'codesnippet',
            codeSnippet_theme: 'zenburn'
        });
    &lt;/script&gt;</code></pre>
    
    <p>点击编辑器上的图标<img src="http://tools.jb51.net/images/codesnippet.png" />，在输入上述代码，即可完成如上所示的代码高亮效果。代码输入框如下图所示：</p>
    
    <p><img src="http://tools.jb51.net/images/codesnippet_input.png" /></p>
    
    <p>2. <code>&lt;code&gt;&lt;/code&gt;</code>代码效果插件图标为<img src="http://tools.jb51.net/images/code_tags.png" />，用法和文字加粗<strong>&lt;b&gt;</strong>标签一样。感兴趣的同学可以试一下看看效果如何~</p>
    `
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // util.formatRichText(json.detail.description);
    this.setData({
      html:formatRichText(this.data.html)
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})